\documentclass{article}

\usepackage{graphicx}
\usepackage{graphics} 
\usepackage{bbding}
\usepackage{boxedminipage}
\usepackage{arev}
\usepackage[T1]{fontenc}
\usepackage{attachfile2}
\usepackage[final]{pdfpages}

\newcommand{\tab}{\hspace*{2em}}



\begin{document}

\begin {center}
\includegraphics[width=8cm, height = 6cm]{usu_logo.jpg}  \linebreak


\Huge \textsc{Milestone II - User Interface Design Document} \linebreak
\normalsize 

\LARGE \textsc{Group 6 \linebreak}
\textsc { CS 5100}
\date {\today}
\end {center}
\pagebreak
\tableofcontents
\pagebreak

\listoffigures \pagebreak


%UI 
\section{User Interface Organization}
This is a basic diagram of how the user would be able to navigate through the application. When the user opens the application, it will prompt them for their account info/user name. Then the user can select to play a single player, multi-player game or card designer. If the user selects to play a single player game, the application will prompt the user to select a type of game, and then begin the game. If the user selects to play a multiplayer game, the application will prompt the user to select to host or join a game. If the user selects to host a game, the application will prompt the user to select the type of game, then enter the lobby to wait for opponents and then begin the game. Otherwise the user will enter the lobby and wait for opponents, then begin the game. If the user selects card designer, the application will prompt the user to create a new deck. \linebreak


\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{work_flow.png} 
\caption{Work Flow}
\end {figure}
\end {center}

\section{Prototype Screen Sketches}

\begin{enumerate}
\item Log On screen \\
This is the login screen.  The user will enter their name and possibly a password.  After having logged in once their name will appear in a list of users the next time they log in.  If they're a card designer, then the password field will be enabled.  There is also a field for the server IP and server port. \\
\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{Welcome.png} 
\caption{Log On}
\end {figure}
\end {center} \pagebreak

\item Main Menu screen \\
The main screen consists of five buttons and serves as the launching point for the different types of games. You will notice that in the top right corner it has a settings button (the one with the crescent wrench) and a close button. If you click the settings button this will take you to the settings window where you can change different options for the game.  The Single Player button will take you to a window that shows the high scores for the Single Player mode and also the window in which you can play different types of single players games.  The Multiplayer button will take you to the window in which you can join or create a multiplayer game.  The Create a Deck button will take you to the window in where you can create or edit symbols for a deck. \\
\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{Main_Menu.png} 
\caption{Main Menu}
\end {figure}
\end {center} \pagebreak

\item Single Player menu screen \\
This is the single player menu screen.  The main purpose is to allow the user to select which game mode they would like to play, either "Time Trial" or "Survival". They can change the settings of each game mode.  High scores can be viewed by the drop down menu on the right. \\
\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{Single_Player_Menu.png} 
\caption{Single Player Menu}
\end {figure}
\end {center} \pagebreak

\item Single Player game screen \\
This screen represents the BASIC single player screen. As you can see, we wanted to make the cards in play the center of the screen. Based on the game configurations, the timer will behave accordingly in the top left corner. The top right corner will also be dynamic in nature in that it will be the area where different tracking information will appear. Some examples of tracking information are score, cards left, etc \.... \\

\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{Single_Player.png} 
\caption{Single Player Game}
\end {figure}
\end {center} \pagebreak

\item Host or Join a Multi-Player game screen \\
This screen is designed to allow the user to enter a multi-player game, either via the join game method or the create game method. If the user selects the create game button, the game will prompt the user to select the game settings for a multi-player game.  The large game list window is designed to provide the user with a list of all the current games available to join. The game info provides information about a selected game from the game list. The player info provides info about the players waiting for the game selected. \\
\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{host_join.png} 
\caption{Host or Join a Game}
\end {figure}
\end {center} \pagebreak

\item Multi-Player Lobby screen \\
The Multi-Player Lobby screen will have info about the game you have joined. The name chosen for the game by the host will display at the top. Underneath that will be the "center stage" which will show the max number of players allowed in the game, what deck is going to be used, as well as the type of game being played (Tower, Well, etc..) The host will have the same view, but be able to edit all of these game properties. At the bottom of this screen there will be a chat window where you can chat with the other players currently in that games lobby. The list of players who are in the lobby will be on the right hand side of the game info panel, it will show each players username, and a ready/not ready indicator for the host. In the bottom right corner of the screen there will be a "Start/Ready" button. The hosts button will read Start while the players will read Ready. Once a player clicks the ready button, their "Leave" button will become inactive, and they will have to wait until the host clicks "Start" to start the game. \linebreak
\begin {center}
\begin {figure} [h]
\includegraphics[width=12cm, height = 9cm]{Lobby.png} 
\caption{Mulit-player Game Lobby}
\end {figure}
\end {center} \pagebreak

\item Multi-Player Game screen \\
The multiplayer screen is very similar in nature and look to our single player screen. Once again the center of the screen is the cards in play. The top right and top left areas will be reserved for various different tracking information. The top right part of the screen will be reserved for the players tracking information. The top left part of the screen will be reserved for the points, cards left or other tracking information for every other player.  \\ 

\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{MultiPlayer.png} 
\caption{Multi-Player Game}
\end {figure}
\end {center} \pagebreak

\item Symbol Set Management screen \\
The purpose of this screen is to allow the user the ability to modify information relating to a symbol set. The two panel selector in the middle of the screen provides the symbol sets category information on the left and the sets name on the right. The user can use the delete buttons over the top of the panels to remove a given set or category for the list. The edit set button sends the user to the card designer menu\\ 

\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{Picture1.png} 
\caption{Symbol Set Management}
\end {figure}
\end {center} \pagebreak

\item Card Designer \\
The card designer will display all of the images of a deck in a grid layout. This allows the user to see as many images as possible at one time.  The buttons at the bottom will not be click-able at this point. When the user selects an image the buttons will activate. "Customize Icon" allows them to browse for an image they have saved somewhere and import it to use instead of the current image. "Restore to Default" will show the default image to be restored then give them a confirm or cancel option so they can restore the default image. \\

\begin {center}
\begin {figure} [h]
\includegraphics[width=14cm, height = 10cm]{card_designer.png} 
\caption{Card Designer}
\end {figure}
\end {center}
\end{enumerate}
\end{document}

